<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="z" uri="http://zkj.com/common/" %>
<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Bootstrap 101 Template</title>

		<!-- Bootstrap -->
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> 
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/js/confirm.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.validate.min.js"></script>
<script src="${pageContext.request.contextPath}/js/message_cn.js"></script>
<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">

		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
		<style type="text/css">
			th {
				text-align: center;
			}
		</style>
	</head>

	<body>

	 <nav class="navbar-inverse">
	<div class="container">
		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header">
			<a class="navbar-brand" href="admin/video/index.action">视频管理系统</a>
		</div>

		<div class="collapse navbar-collapse"
			 id="bs-example-navbar-collapse-9">
			<ul class="nav navbar-nav" id="nan">
				<li ><a href="showVideo.action">视频管理</a></li>
				<li ><a href="showTecher.action">主讲人管理</a></li>
				<li class="active"><a href="showItem.action">课程管理</a></li>
			</ul>
			<p class="navbar-text navbar-right">
				<span>欢迎您，${sessionScope.username}</span> <i class="glyphicon glyphicon-log-in"
														 aria-hidden="true"></i>&nbsp;&nbsp;<a href="../admin/logout.action"
																							   class="navbar-link">退出</a>
			</p>
		</div>
	
		<!-- /.navbar-collapse -->


	</div>
	<!-- /.container-fluid -->
</nav>

		<div class="jumbotron" style="padding-top: 15px;padding-bottom: 15px;">
			<div class="container">
				<h2>课程管理</h2>
			</div>

		</div>

		<div class="container">
			<div class="row">
				<div class="col-md-2">
					<a href="editItem.action?id=-1"><button type="button" class="btn btn-info">添加</button></a>
				</div>
			</div>	
		</div>

		<div class="container" style="margin-top:20px;">
			<table class="table table-bordered table-hover" style="text-align:center">
				<thead>
					<tr class="active">
						<th class="col-md-1">序号</th>
						<th class="col-md-2">标题</th>
						<th>简介</th>
						<th class="col-md-1">编辑</th>
						<th class="col-md-1">删除</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach items="${list}" var="item"  varStatus="c">
						<tr>
							<td>${c.count}</td>
							<td>${item.courseTitle}</td>
							<td>${item.courseDesc}</td>
							<td>
								<a href="editItem.action?id=${item.id}"><span class="glyphicon glyphicon-edit"></span></a>
							</td>
							<td>
							<a href="#" onclick="confirmModel1(this,'${item.courseTitle}',${item.id})"><span class="glyphicon glyphicon-trash" ></span></a>
							</td>
						</tr>
					</c:forEach>

				</tbody>
			</table>
			 <div class="text-right">
				  <z:page url="showItem.action"></z:page>
				 </div>
		</div>

	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/confirm.js"></script>
    <script type="text/javascript">
    
     
      function confirmModel1(obj,title,id){
      
           Confirm.show('温馨提示', '您确定要删除'+title+'吗？', {
                '确定': {
                    'primary': true,
                    'callback': function() {
                        //使用ajax删除数据
                        var params={"id":id};
                        $.post("delItem.action",params,function(data){
                        
                            if(data=='success'){
                               //通过js删除tr节点
                               $(obj).parent().parent().remove();//$(obj) 获取的是a,$(obj).parent() 获取td
                               Confirm.show('温馨提示', '删除成功！');
                            }else{
                               Confirm.show('温馨提示', '删除失败！');
                            }
                            
                        });
                        
                    }
                }
            });
        }
    
    </script>
	</body>

</html>